<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：

    -->
    <style>
        .basic{
            width:300px;height: 50px; border: 1px solid black;
        }
        .happy{
            border:3px solid red;background-color: skyblue;       
        }
        .normal{
            background-color: #bfa;
        }
        .sad{
            border: 4px dashed rgb(2,197,2);background-color: rgba(255, 255, 0, 0.644);
        }
        .test1{
            background-color: rgb(139, 170, 162);
        }
        .test2{
            font-size: 20px;text-shadow: 2px 2px 10px red;
        }
        .test3{
            border-radius: 11px;
        }
    </style>
    <div id="demo">
        
        <!-- 绑定class样式--字符串写法 动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>
        <!-- 绑定class样式--数组写法  -->
        <div class="basic" :class="classArr">{{name}}</div><br>
         <!-- 绑定class样式--对象写法 -->
        <div class="basic" :class="classObject">{{name}}</div><br>
        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObject">{{name}}</div><br>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div><br>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        const vm = new Vue({
            el:"#demo",
            data:{
                name:"test",
                mood:'happy',
                index:0,
                moodArr:['happy','normal','sad'],
                classArr:['test1','test2','test3'],
                classObject:{
                    test1:false,
                    test2:false
                },
                styleObject:{
                    fontSize:'40px',
                    color:'blue',
                    backgroundColor:'orange'
                },
                styleArr:[
                    {
                        fontSize:'30px',
                        color:'orange'
                    },
                    {
                        backgroundColor:'blue'
                    }
                ]
            },methods: {
                changeMood(){
                    //轮询切换心情                 
                    console.log(this.index)
                    this.index ++
                    let a = this.index % 3
                    return this.mood = this.moodArr[a]
                }
            },
        })
    </script>
</body>
</html>